<template>
  <div>
    <vxe-grid v-bind="gridOptions" :data="objects" :edit-config="{ trigger: 'dblclick', mode: 'row' }"
      :highlight-current-row="true" size="mini" :height="table_height" style="width: 100%" @edit-closed="editEvent"
      @current-change="currentChange">
      <template #toolbar_buttons>
        <el-button type="primary" v-if="add_statu" style="margin-left:10px" size="mini" @click="addInit">新建模型</el-button>
        <el-input v-model="searchWords" v-if="search_statu" style="width:200px;margin-left: 10px;" size="small" placeholder="输入关键字查询"
          clearable @input="search()" />
      </template>
      <template #is_page_default="{ row }">
        <el-switch v-model="row.is_page" active-color="#13ce66" inactive-color="#ff4949" @change="changeObject(row)" />
      </template>
      <template #is_query_default="{ row }">
        <el-switch v-model="row.is_query" active-color="#13ce66" inactive-color="#ff4949" @change="changeObject(row)" />
      </template>
      <template #is_add_default="{ row }">
        <el-switch v-model="row.is_add" active-color="#13ce66" inactive-color="#ff4949" @change="changeObject(row)" />
      </template>
      <template #is_save_add_default="{ row }">
        <el-switch v-model="row.is_save_add" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #is_update_default="{ row }">
        <el-switch v-model="row.is_update" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #is_line_update_default="{ row }">
        <el-switch v-model="row.is_line_update" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #is_delete_default="{ row }">
        <el-switch v-model="row.is_delete" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #is_import_default="{ row }">
        <el-switch v-model="row.is_import" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #is_handle_default="{ row }">
        <el-switch v-model="row.is_handle" active-color="#13ce66" inactive-color="#ff4949"
          @change="changeObject(row)" />
      </template>
      <template #operation="{ row }">
        <el-button size="mini" type="primary" @click="objectEdit_(row)">更新</el-button>
        <el-button size="mini" type="success" @click="objectCopy_(row)">复制</el-button>
        <el-button size="mini" type="info" @click="objectSql(row)">迁移</el-button>
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="objectDel_(row)" />
      </template>
    </vxe-grid>
    <vxe-modal id="coder_objectNewDialog" v-model="objectNewDialog" title="新建模型" width="600" show-footer show-zoom
      resize remember storage transfer>
      <template #default>
        <el-form ref="form" :form="form" label-width="80px">
          <el-form-item label="编号" :label-width="formLabelWidth"><el-input v-model.lazy="form.no"
              autocomplete="off" /></el-form-item>
          <el-form-item label="对象" :label-width="formLabelWidth"><el-input v-model.lazy="form.cn"
              autocomplete="off" /></el-form-item>
          <el-form-item label="数据源" :label-width="formLabelWidth">
            <el-select v-model.lazy="form.data_source" placeholder="请选择" style="width:100%" @change="getTables">
              <el-option v-for="item in data_source" :key="item.value" :label="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="元数据表" :label-width="formLabelWidth">
            <el-select v-model.lazy="form.table_name" placeholder="请选择" filterable style="width:100%">
              <el-option v-for="item in tables" :key="item.value" :label="item.value" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="查询表达式" :label-width="formLabelWidth"><el-input v-model.lazy="form.where_attr"
              type="textarea" :rows="2" autocomplete="off" /></el-form-item>
          <el-form-item label="拦截器" :label-width="formLabelWidth"><el-input v-model.lazy="form.interceptor"
              autocomplete="off" /></el-form-item>
          <el-form-item label="表格操作列宽度" :label-width="formLabelWidth"><el-input v-model.lazy="form.handle_width"
              autocomplete="off" /></el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button size="mini" @click="objectNewDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import XEClipboard from 'xe-clipboard'
  import {
    getObjects,
    changeObject,
    newObject,
    getDataSource,
    getTables,
    objectEdit_,
    objectCopy_,
    objectDel_,
    objectSql,
  } from '@/api/coder/data.js';

  export default {
    name: 'object',
    props: ['table_height', 'add_statu', 'data_object_no','search_statu'],
    data() {
      return {
        form:{},
        gridOptions: {
          border: true,
          showHeaderOverflow: true,
          showOverflow: true,
          keepSource: true,
          id: 'coder_data',
          rowId: 'id',
          rowConfig: {
            isHover: true
          },
          toolbarConfig: {
            slots: {
              buttons: 'toolbar_buttons'
            },
            refresh: true,
            print: true,
            zoom: true,
            custom: true,
            perfect: true
          },
          columns: [
            {
              field: 'no',
              title: '编号'
            },
            {
              field: 'cn',
              title: '对象',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              field: 'data_source',
              title: '数据源'
            },
            {
              field: 'table_name',
              title: '元数据表'
            },
            {
              field: 'where_attr',
              title: '查询表达式',
              editRender: {
                name: 'EditDownTextarea'
              }
            },
            {
              field: 'interceptor',
              title: '拦截器',
              editRender: {
                name: 'EditDownTextarea'
              }
            },
            {
              field: 'is_page',
              title: '分页',
              slots: {
                default: 'is_page_default'
              }
            },
            {
              field: 'page_size',
              title: '每页显示条数',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              field: 'is_query',
              title: '查询',
              slots: {
                default: 'is_query_default'
              }
            },
            {
              field: 'is_add',
              title: '新增',
              slots: {
                default: 'is_add_default'
              }
            },
            {
              field: 'is_save_add',
              title: '保存新增',
              slots: {
                default: 'is_save_add_default'
              }
            },
            {
              field: 'is_update',
              title: '修改',
              slots: {
                default: 'is_update_default'
              }
            },
            {
              field: 'is_line_update',
              title: '行内修改',
              slots: {
                default: 'is_line_update_default'
              }
            },
            {
              field: 'is_delete',
              title: '删除',
              slots: {
                default: 'is_delete_default'
              }
            },
            {
              field: 'is_import',
              title: '导入',
              slots: {
                default: 'is_import_default'
              }
            },
            {
              field: 'is_handle',
              title: '操作列',
              slots: {
                default: 'is_handle_default'
              }
            },
            {
              field: 'handle_width',
              title: '操作列宽度',
              editRender: {
                name: 'input',
                immediate: true,
                attrs: {
                  type: 'text'
                }
              }
            },
            {
              title: '操作',
              width: 300,
              showOverflow: true,
              slots: {
                default: 'operation'
              }
            }
          ]
        },
        searchWords: '',
        objects: [],
        allObjects: [],
        fields: [],
        data_source: [],
        tables:[],
        objectNewDialog: false,
        formLabelWidth: '110px',
      }
    },
    created() {
      this.getObjects(this.data_object_no)
      this.getDataSource()
    },
    methods: {
      getObjects(data_object_no) {
        getObjects(data_object_no).then(res => {
            this.objects = res.list
            this.allObjects = res.list
        })
      },
      getDataSource: function(event) {
        getDataSource().then(res => {
          this.data_source = res.list
        })
      },
      getTables(data_source) {
        getTables(data_source).then(res => {
          this.tables = res.list
        })
      },
      search() {
        const filterName = this.searchWords.trim().toLowerCase()
        if (filterName !== '') {
          // const filterRE = new RegExp(filterName, 'gi')
          const searchProps = ['no', 'cn']
          const rest = this.allObjects.filter(item => searchProps.some(key => item[key].toLowerCase().indexOf(
            filterName) > -1))
          this.objects = rest
        } else {
          this.objects = this.allObjects
        }
      },
      changeObject(row) {
        changeObject(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      // change
      switchFieldChange(row) {
        fieldChange(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      editEvent({row,column}, event) {
        changeObject(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      editClosedEvent({row,column}, event) {
        fieldChange(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      addInit: function() {
        this.form = {}
        this.objectNewDialog = true
      },
      onSubmit: function() {
        newObject(this.form).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.getObjects()
          this.objectNewDialog = false
        })
      },
      objectEdit_(row) {
        objectEdit_(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
      },
      objectCopy_(row) {
        this.$prompt('请输入数据源编号', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
          .then(({
            value
          }) => {
            row.new_no = value
            objectCopy_(row).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getObjects()
            })
          })
      },
      objectSql(row) {
        objectSql(row).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          XEClipboard.copy(res.sql)
        })
      },
      objectDel_: function(row) {
        this.$confirm('确认是否要删除此数据模型吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            objectDel_(row.no).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getObjects()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      currentChange({row}){
        this.$emit("rowClick",row)
      }
    }
  };
</script>
